{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show shadow-sm my-3 mx-3" role="alert">
  <strong>{{ message }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== Booking History Section ===== -->
<section class="py-5 history-section">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h3 class="fw-bold text-success mb-0">
        <i class="bi bi-clock-history"></i> Booking History
      </h3>
      <a href="/booking" class="btn btn-success rounded-pill px-4 shadow-sm">
        <i class="bi bi-calendar-plus"></i> Book Again
      </a>
    </div>

    <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-success text-center text-dark">
            <tr>
              <th>Name of Booking</th>
              <th>Start Date & Time</th>
              <th>End Date & Time</th>
              <th>Total Amount (₹)</th>
            </tr>
          </thead>
          <tbody class="text-center">
            {% for b in booking %}
            <tr>
              <td class="fw-semibold text-dark">{{ b.name }}</td>
              <td>{{ b.start_time }}</td>
              <td>{{ b.end_time }}</td>
              <td class="fw-bold text-success">₹{{ b.total }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-muted py-4">
                <i class="bi bi-info-circle"></i> You haven’t made any bookings yet.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #f8fff8, #ffffff);
  }

  .history-section {
    min-height: 80vh;
  }

  .card {
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  table {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
  }

  thead th {
    font-weight: 600;
    background: #d1e7dd;
    border: none;
  }

  tbody tr {
    background-color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  }

  tbody tr:hover {
    background-color: #e9f7ef;
    transform: scale(1.01);
  }

  .table td,
  .table th {
    vertical-align: middle;
    padding: 1rem;
  }

  .btn-success {
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-success:hover {
    background-color: #218838;
    transform: translateY(-2px);
  }

  @media (max-width: 768px) {
    .table {
      font-size: 0.9rem;
    }
    .btn-success {
      width: 100%;
      text-align: center;
      margin-top: 10px;
    }
  }
</style>

{% endblock body %}